<template>
	<div class="register">
		<van-popup
			class="register-box"
			v-model="isShow"
			overlay
			lazy-render
			position="bottom"
			:close-on-click-overlay="false"
			@click-overlay="clickOverlay"
		>
			<div class="register-title">注册账号</div>
			<van-form @submit="register">
				<van-field
				  v-model="userRegisterInfo.nickName"
				  name="昵称"
					label="昵称"
				  placeholder="昵称"
					autocomplete="off"
					:rules="[{pattern: /^[a-zA-Z0-9_-]{4,16}$/ , message: '4到16位(字母,数字,下划线,减号)'}]"
				/>
				<van-field
				  v-model="userRegisterInfo.phone"
				  type="tel"
				  name="手机号"
				  label="手机号"
					placeholder="手机号"
					autocomplete="off"
					:rules="[{pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ , message: '号码格式错误'}]"
				/>
				<van-field
				  v-model="userRegisterInfo.password"
				  :type="isShowPass ? 'text' : 'password'"
				  name="密码"
					label="密码"
				  placeholder="密码"
					autocomplete="off"
					:right-icon="isShowPass ? 'eye-o' : 'closed-eye'"
					@click-right-icon="toggleShowPass"
					:rules="[{pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).*$/ , message: '最少6位,包括至少1个大写字母,1个小写字母,1个数字'}]"
				/>
				<div class="registered-btn">
					<van-button 
						round 
						block 
						type="default" 
						native-type="submit"
					>立即注册</van-button>
				</div>
			</van-form>
		</van-popup>
	</div>
</template>

<script>
	import { register } from '@/api/user.js'
	export default {
		data() {
			return {
				// 用户注册信息对象
				userRegisterInfo: {
					nickName: '',
					phone: '',
					password: ''
				},
				// 是否显示密码
				isShowPass: false,
			}
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			clickOverlay() {
				this.$emit('click-overlay')
			},
			// 显示隐藏密码
			toggleShowPass() {
				this.isShowPass = !this.isShowPass
			},
			// 点击注册
			register() {
				this.$toast.loading({
					message: '加载中...',
					forbidClick: true
				})
				register(this.userRegisterInfo)
				.then(res => {
					console.log(res)
					// 判断是否注册成功
					if(res.data.code !== 100) return this.$toast.fail(res.data.msg)
					this.$toast.success(res.data.msg)
					this.$emit('click-overlay')
				})
				.catch(err => {
					return this.$toast.fail('请求失败,请重试！')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register{
		.register-box{
			padding: 20px 0;
			.register-title{
				font-size: 24px;
				font-weight: bold;
				padding: 0 15px;
				margin-bottom: 10px;
			}
			/deep/ .van-form{
				padding: 0 30px;
			}
			.registered-btn{
				margin-top: 15px;
				margin-bottom: 30px;
			}
		}
	}
</style>